<template>
  <q-layout view="hHr LpR lFf"> <!-- Be sure to play with the Layout demo on docs -->

    <!-- (Optional) The Header -->
    <q-layout-header>
      <q-toolbar class="q-py-sm justify-between">
        <q-btn
          flat
          round
          dense
          icon="menu"
          @click="leftDrawer = !leftDrawer"
        />
        <q-toolbar-title shrink class="q-px-xl">美图图图图图图</q-toolbar-title>
        <q-tabs align="justify">
          <q-route-tab slot="title" to="/" label="首页" class="q-px-xl" />
          <q-route-tab slot="title" to="/category/touxiang" label="头像" class="q-px-xl" />
          <q-route-tab slot="title" to="/category/bizhi" label="壁纸" class="q-px-xl" />
          <q-route-tab slot="title" to="/category/meitu" label="美图" class="q-px-xl" />
        </q-tabs>
        <q-search inverted v-model="searchQuery" color="none" class="q-ml-xl col no-shadow" autofocus placeholder="输入您要搜索的内容" clearable />
        <div class="col order-last row justify-end">
          <q-btn color="none no-shadow q-mr-md" flat label="登录" />
          <q-btn color="none no-shadow" flat label="注册" />
        </div>
      </q-toolbar>

    </q-layout-header>

    <!-- (Optional) A Drawer; you can add one more with side="right" or change this one's side -->
    <q-layout-drawer
      side="left"
      v-model="leftDrawer"
    >
      <!-- QScrollArea is optional -->
      <q-scroll-area class="fit q-pa-sm">
        这是左侧的导航栏
      </q-scroll-area>
    </q-layout-drawer>

    <q-page-container>
      <!-- This is where pages get injected -->
      <router-view />

    </q-page-container>

  </q-layout>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      leftDrawer: false,
      searchQuery: ''
    }
  }
}
</script>

<style>
</style>
